import 'package:flutter/material.dart';

class BloodPressureDetailPage extends StatefulWidget {
  const BloodPressureDetailPage({Key? key}) : super(key: key);

  @override
  State<BloodPressureDetailPage> createState() =>
      _BloodPressureDetailPageState();
}

class _BloodPressureDetailPageState extends State<BloodPressureDetailPage> {
  int _selectedTabIndex = 0;
  final List<String> _tabs = ['Day', 'Week', 'Month'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: const Color(0xFF1DC4A0),
        elevation: 0,
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.pop(context),
        ),
        title: Text(
          '血压',
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // 添加按钮
                Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.blue, width: 1.5),
                  ),
                  child: Icon(
                    Icons.add,
                    color: Colors.blue,
                  ),
                ),

                // 标签切换
                Row(
                  children: List.generate(_tabs.length, (index) {
                    final isSelected = _selectedTabIndex == index;
                    return _buildTab(_tabs[index], isSelected, () {
                      setState(() {
                        _selectedTabIndex = index;
                      });
                    });
                  }),
                ),

                // 设置按钮
                Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.blue, width: 1.5),
                  ),
                  child: Icon(
                    Icons.settings,
                    color: Colors.blue,
                  ),
                ),
              ],
            ),
          ),

          // 今日平均血压
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Text(
              '今日平均 BP',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),

          // 收缩压和舒张压数值
          Padding(
            padding: const EdgeInsets.fromLTRB(20, 20, 20, 10),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 收缩压
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'SYS',
                        style: TextStyle(
                          color: Colors.grey,
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 5),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.baseline,
                        textBaseline: TextBaseline.alphabetic,
                        children: [
                          Text(
                            '144',
                            style: TextStyle(
                              color: Colors.blue,
                              fontSize: 32,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          SizedBox(width: 5),
                          Text(
                            'mmHg',
                            style: TextStyle(
                              color: Colors.blue,
                              fontSize: 14,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),

                // 舒张压
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'DIA',
                        style: TextStyle(
                          color: Colors.grey,
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 5),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.baseline,
                        textBaseline: TextBaseline.alphabetic,
                        children: [
                          Text(
                            '72',
                            style: TextStyle(
                              color: Colors.blue,
                              fontSize: 32,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          SizedBox(width: 5),
                          Text(
                            'mmHg',
                            style: TextStyle(
                              color: Colors.blue,
                              fontSize: 14,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

          // 数据类型标识
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Row(
              children: [
                // 收缩压
                Container(
                  width: 12,
                  height: 12,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.cyan,
                  ),
                ),
                SizedBox(width: 5),
                Text(
                  '收缩压',
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.grey,
                  ),
                ),
                SizedBox(width: 20),

                // 舒张压
                Container(
                  width: 12,
                  height: 12,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.blue,
                  ),
                ),
                SizedBox(width: 5),
                Text(
                  '舒张压',
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.grey,
                  ),
                ),
              ],
            ),
          ),

          // 血压图表
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: _buildBloodPressureChart(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTab(String text, bool isSelected, VoidCallback onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        decoration: BoxDecoration(
          border: isSelected
              ? Border(
                  bottom: BorderSide(
                    color: Colors.blue,
                    width: 2,
                  ),
                )
              : null,
        ),
        child: Text(
          text,
          style: TextStyle(
            color: isSelected ? Colors.blue : Colors.grey,
            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
          ),
        ),
      ),
    );
  }

  Widget _buildBloodPressureChart() {
    return Container(
      width: double.infinity,
      height: double.infinity,
      child: CustomPaint(
        painter: BloodPressureChartPainter(),
      ),
    );
  }
}

class BloodPressureChartPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Paint axisPaint = Paint()
      ..color = Colors.grey.shade300
      ..strokeWidth = 1;

    // 绘制中间分隔线
    canvas.drawLine(
      Offset(0, size.height / 2),
      Offset(size.width, size.height / 2),
      axisPaint
        ..color = Colors.grey.shade200
        ..strokeWidth = 1.5,
    );

    // 定义数据点
    final List<double> systolicValues = [
      0.7,
      0.3,
      0.5,
      0.9,
      0.6,
      0.4,
      0.7,
      0.2
    ];

    final List<double> diastolicValues = [
      0.4,
      0.6,
      0.8,
      0.5,
      0.7,
      0.3,
      0.6,
      0.5
    ];

    // 柱状图宽度和间距
    final double barWidth = 20;
    final double xStep = size.width / (systolicValues.length * 2);

    // 绘制血压数据
    for (int i = 0; i < systolicValues.length; i++) {
      final double x = xStep + i * xStep * 2;

      // 绘制收缩压（上半部分）
      final double systolicValue = systolicValues[i];
      final double systolicHeight = (size.height / 2) * systolicValue;

      final Paint systolicPaint = Paint()
        ..color = Colors.cyan
        ..style = PaintingStyle.fill;

      canvas.drawRect(
        Rect.fromLTWH(
          x - barWidth / 2,
          (size.height / 2) - systolicHeight,
          barWidth,
          systolicHeight,
        ),
        systolicPaint,
      );

      // 绘制舒张压（下半部分）
      final double diastolicValue = diastolicValues[i];
      final double diastolicHeight = (size.height / 2) * diastolicValue;

      final Paint diastolicPaint = Paint()
        ..color = Colors.blue
        ..style = PaintingStyle.fill;

      canvas.drawRect(
        Rect.fromLTWH(
          x - barWidth / 2,
          size.height / 2,
          barWidth,
          diastolicHeight,
        ),
        diastolicPaint,
      );
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}
